<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试 GET 和 POST 请求的异步加载</title>
	<script type="text/javascript" src="./scripts/jquery-1.9.js"></script>
</head>
<body>
	<button id="btn">发送一个Ajax请求</button>
	<div class="box"></div>
</body>
<script type="text/javascript">
	$("#btn").click(function(){
		/**
		 * 通过 GET 请求实现异步加载
		 * @param  {[type]} data){			$("#box").html(data);		} [description]
		 * @return {[type]}                                     [description]
		 */
		/*$.get('doAjax.php', {'username':'panchaozhi', 'age':21}, function(data){
			$("#box").html(data);
		});*/

		/**
		 * 通过 POST 方式请求实现异步加载
		 * @param  {[type]} data){			$("#box").html(data);		} [description]
		 * @return {[type]}                                     [description]
		 */
		/*$.post('doAjax.php', {'username':'panchaozhizhichaopan', 'sex':'mam'}, function(data){
			$("#box").html(data);
		});*/

		/**
		 * 这是两种请求才能实现的异步加载方式，取决于 type 的类型是 get 还是 post
		 * @param  {[type]} data){				$("#box").html(data);			} [description]
		 * @param  {[type]} 'dataType':'html'                     [description]
		 * @param  {[type]} 'type':'post'                         [description]
		 * @param  {[type]} }                                    [description]
		 * @return {[type]}                                       [description]
		 */
		$.ajax({
			'url':'doAjax.php',
			'data':{'username':'这是一个拥有 POST 和 GET 方式', 'why':'because i like'},
			'success':function(data){
				$(".box").html(data);
			},
			'dataType':'html',
			'type':'post',
		});
	});
</script>
</html>